<template>
    <div class="default-main">
        <el-row v-loading="state.loading" :gutter="20">
            <el-col class="xs-mb-20" :xs="24" :sm="16">
                <el-form v-if="!state.loading" ref="formRef" label-position="top">
                    <el-tabs v-model="state.activeTab" type="border-card">
                        <el-tab-pane class="config-tab-pane" name="one" :label="t('公司信息')">
                            
                            <div class="config-form-item">
                                <FormItem :label="t('公司名称') + ' (' + t('中文') + ')'" type="string" v-model="state.form.gs_name_cn" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('公司名称') + ' (' + t('英文') + ')'" type="string" v-model="state.form.gs_name_en" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('公司地址') + ' (' + t('中文') + ')'" type="string" v-model="state.form.gs_address_cn" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('公司地址') + ' (' + t('英文') + ')'" type="string" v-model="state.form.gs_address_en" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('社会信用代码')" type="string" v-model="state.form.gs_id" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('联系电话')" type="string" v-model="state.form.gs_tel" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('企业海关代码')" type="string" v-model="state.form.customes_code" placeholder=" " />
                            </div>
                        </el-tab-pane>

                        <el-tab-pane class="config-tab-pane" name="two" :label="t('汇率设置')">
                            <div class="config-form-item">
                                <FormItem :label="t('美元兑韩元')" type="number" v-model="state.form.usd_to_krw" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('美元兑人民币')" type="number" v-model="state.form.usd_to_cny" placeholder=" " />
                            </div>
                            <div class="config-form-item">
                                <FormItem :label="t('人民币兑韩元')" type="number" v-model="state.form.cny_to_krw" placeholder=" " />
                            </div>
                            
                        </el-tab-pane>

                        <!-- <el-tab-pane class="config-tab-pane" name="three" label="商品详情">
                            <div class="config-form-item">
                                <FormItem label="商品图册" type="images" v-model="form.images" />
                            </div>
                            
                        </el-tab-pane> -->

                        <el-button type="primary" @click="onSubmit()">{{ t('保存') }}</el-button>
                    </el-tabs>
                </el-form>
            </el-col>
            <!-- <el-col :xs="24" :sm="8">
                <el-card header="其他设置">
                    <div class="config-form-item">
                        <FormItem label="商品排序" type="number" v-model="form.weigh" placeholder="数值越大排序越高" />
                    </div>
                    <div class="config-form-item">
                        <FormItem label="起拍数量" type="number" v-model="form.start_number" prop="name" placeholder="留空则不限制数量" />
                    </div>
                    <div class="config-form-item">
                        <FormItem label="每日限购" type="number" v-model="form.quota" prop="name" placeholder="根据客户端IP限制购买数量" />
                    </div>
                </el-card>
            </el-col> -->
        </el-row>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import FormItem from '/@/components/formItem/index.vue'
import { ElForm } from 'element-plus'

import { useI18n } from 'vue-i18n'

import { getInfoApi, setInfoApi } from '/@/api/most/system/basic'

const { t } = useI18n()

const formRef = ref < InstanceType < typeof ElForm >> ()



const state = reactive({
    loading: false,
    activeTab: 'one',
    form: {

    }
})



const onSubmit = () => {
    setInfoApi(state.form).then((e) => {
    })
}

onMounted(() => {
    state.loading = true;
    getInfoApi().then((e) => {
        state.loading = false;
        state.form = e.data;
    })
})
</script>



<style scoped lang="scss">
    .send-test-mail {
        padding-bottom: 20px;
    }

    .el-tabs--border-card {
        border: none;
        box-shadow: var(--el-box-shadow-light);
        border-radius: var(--el-border-radius-base);
    }

    .el-tabs--border-card :deep(.el-tabs__header) {
        background-color: var(--ba-bg-color);
        border-bottom: none;
        border-top-left-radius: var(--el-border-radius-base);
        border-top-right-radius: var(--el-border-radius-base);
    }

    .el-tabs--border-card :deep(.el-tabs__item.is-active) {
        border: 1px solid transparent;
    }

    .el-tabs--border-card :deep(.el-tabs__nav-wrap) {
        border-top-left-radius: var(--el-border-radius-base);
        border-top-right-radius: var(--el-border-radius-base);
    }

    .el-card :deep(.el-card__header) {
        height: 40px;
        padding: 0;
        line-height: 40px;
        border: none;
        padding-left: 20px;
        background-color: var(--ba-bg-color);
    }

    .config-tab-pane {
        padding: 5px;
    }

    .config-tab-pane-add {
        width: 80%;
    }

    .config-form-item {
        display: flex;
        align-items: center;

        .el-form-item {
            flex: 13;
        }

        .config-form-item-name {
            opacity: 0;
            flex: 3;
            font-size: 13px;
            color: var(--el-text-color-disabled);
            padding-left: 20px;
        }

        .del-config-form-item {
            cursor: pointer;
            flex: 1;
            padding-left: 10px;
        }

        .close-icon {
            display: none;
        }

        &:hover {
            .config-form-item-name {
                opacity: 1;
            }

            .close-icon {
                display: block;
                color: var(--el-text-color-disabled) !important;
            }
        }
    }

    .config_quick_entrance {
        margin-left: 10px;
        margin-bottom: 10px;
    }

    @media screen and (max-width: 768px) {
        .xs-mb-20 {
            margin-bottom: 20px;
        }
    }

    .sku-table {
    overflow: auto;
    position: relative;
    background-color: #f9f9f9;
    border: 1px solid #c6d1db;
    border-top: none;
  }
  .sku-table-header {
    background: #f5f7fa;
    overflow-x: hidden;
    position: relative;
  }
  .sku-table-header-cell {
    color: #333;
    font-weight: 400;
    height: 42px;
    margin-left: 1px;
    position: relative;
    font-size: 12px;
    border-top: 1px solid #c6d1db;
    text-overflow: ellipsis;
    word-break: break-all;
    padding: 0px;
  }
  .sku-table-header-cell + .sku-table-header-cell {
    border-left: none;
  }
  .sku-table-header-cell:first-child {
    border-left: none;
  }
  .sku-table-header-cell:last-child {
    border-right: none;
  }
  .sku-table-header-cell .spec-name {
    font-size: 14px;
    display: inline-block;
    min-width: 80px;
  }
  .sku-table-body {
    border-spacing: 0;
    border: 1px;
    border-color: #c6d1db;
    width: 100%;
  }
  .sku-table-body tr:first-of-type td {
    border-top: none !important;
  }
  .sku-table-body tr:last-of-type td {
    border-bottom: none !important;
  }
  .sku-table-body tr + tr .sku-table-body-cell {
    border-top: none;
  }
  .sku-table-body td:first-of-type {
    border-left-color: transparent;
    text-align: center;
  }
  .sku-table-body td:last-of-type {
    border-right: none;
  }
  .sku-table-body-cell {
    color: #323b44;
    font-size: 12px;
    text-overflow: ellipsis;
    word-break: break-all;
    text-align: left;
    background: #fff;
    vertical-align: middle;
    height: 32px;
    padding: 0 6px;
    min-width: 100px;
  }
  .sku-table-body-cell.hide {
    display: none;
  }
  .sku-table-body-cell.row-span-style {
    text-align: center;
    min-width: 100px;
  }
  .sku-table-body-cell + .sku-table-body-cell {
    border-left-color: transparent !important;
  }
  .sku-table-body-cell .el-input__inner {
    border: none !important;
    background-color: transparent;
  }
  .col-last-rowspan {
    border-bottom: none !important;
  }
</style>
